import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
import toast from "react-hot-toast";
import { Mail } from "lucide-react";

/**
 * ContactForm组件用于显示联系表单并处理表单提交
 * 它使用React的useState钩子来管理表单数据
 */
const ContactForm = () => {
  // 初始化表单状态
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  /**
   * handleSubmit函数用于处理表单提交事件
   * 它阻止默认的表单提交行为，并在此处可以实现表单数据的提交逻辑
   * @param {Object} e 表单提交事件对象
   */
  const handleSubmit = (e) => {
    e.preventDefault();
    // 创建一个包含表单数据的对象
    const formData = {
      name,
      email,
      message
    };
    console.log('FormData:', formData); // 添加调试日志

    // 使用fetch API将表单数据发送到自定义API
    fetch('http://localhost:5000/api/send-message', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
      .then(response => {
        console.log('Response:', response); // 添加调试日志
        return response.json();
      })
      .then(data => {
        console.log('Data:', data); // 添加调试日志
        if (data.success) {
          toast.success("Message sent successfully!");
        } else {
          toast.error("Failed to send message.");
        }
      })
      .catch(error => {
        console.error('Error:', error);
        toast.error("An error occurred while sending the message.");
      });
  };

  // 渲染联系表单组件
  return (
    <>
      <Header />
      <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-gray-100 to-gray-200 p-4">
        <div className="w-full mt-24 max-w-lg p-8 space-y-6 bg-white rounded-lg shadow-xl">
          <h2 className="text-4xl font-bold text-center text-primary flex items-center justify-center gap-2">
            <Mail size={28} />
            Contact Us
          </h2>
          <p className="text-center text-text">
            We&amp;dapos;d love to hear from you! Please fill out the form below to get in
            touch.
          </p>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
                placeholder="Name"
                className="w-full px-4 py-3 border bg-gray-200 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
              />
            </div>
            <div>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                placeholder="Email"
                className="w-full px-4 py-3 border bg-gray-200 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
              />
            </div>
            <div>
              <textarea
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                required
                placeholder="Message"
                rows="5"
                className="w-full px-4 py-3 border bg-gray-200 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
              />
            </div>
            <button
              type="submit"
              className="w-full py-3 mt-4 text-white bg-red-600 rounded-lg shadow-lg hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-red-400"
            >
              Send Message
            </button>
          </form>
        </div>
      </div>
      <Footer />
    </>
  );
};

export default ContactForm;
